<template>
	<!-- 首页->
	<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
	<!-- <u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar> -->
	<!-- 所有内容的容器 -->
	<view class="content">
		<view class="u-page">
			<view class="Top">
				<view class="left">
					<u-image width="80px" height="80px" :src="src" shape="circle"></u-image>
					<view class="center">
						<view class="u-body-item-title u-line-1">昵称:admin</view>
						<view class="u-body-item-title u-line-1">ID:2222</view>
						<text class="flex flex-direction">个性签名:哈哈哈哈哈哈</text>
					</view>
				</view>
				<u-icon name="bell" color="#2979ff" size="46"></u-icon>
			</view>
			<!-- 搜索框 -->
			<view class="search">
				<u-search placeholder="寻找老师..." v-model="Search" @focus="getSearch"></u-search>
			</view>
			<!-- 轮播图 -->
			<view class="wrap" border-radius="10rpx">
				<u-swiper :list="list1"></u-swiper>
			</view>
		</view>
		
		<view class="info">
			<text class="t-text">名师推荐</text>
			<view class="main">
				<view class="info-main-card" v-for="item in info" :key="item.id">
					<view class="left"><image :src="item.img"></image></view>
					<view class="right">
						<view class="">姓名：{{item.name}}</view>
						<view class="">简介：{{item.introduce}}</view>
						<view class="">评分：<u-rate :count="count" v-model="item.grade"></u-rate></view>
					</view>
					<!-- 咨询 -->
					<view class="Zixun">咨询</view>
				</view>
				
				
			</view>
		</view>
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '主页',
						count: 0,
						isDot: true,
						customIcon: false,
						pagePath: '/pages/navigation/home'
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/navigation/information'
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '查找',
						midButton: true,
						customIcon: false,
						pagePath: '/pages/navigation/seek'
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '课程',
						customIcon: false,
						pagePath: '/pages/navigation/curriculum'
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 0,
						isDot: false,
						customIcon: false,
						pagePath: '/pages/navigation/my'
					},
				],
				list1: [{
						image: 'https://ts1.cn.mm.bing.net/th/id/R-C.8f7614e48152d25f06f33e148436c551?rik=rU3YRp0rbzS92Q&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50043%2f6610.jpg_wh860.jpg&ehk=mmfED%2fgfnpH3URM68iXVpdtE16%2fujcJUrtCogc39dvo%3d&risl=&pid=ImgRaw&r=0',
					},
					{
						image: 'https://img95.699pic.com/element/40084/9934.png_860.png',
					},
					{
						image: 'https://n.sinaimg.cn/sinakd2021715s/533/w1280h853/20210715/69ae-ksmehzt4728725.jpg',
					},
					{
						image: 'https://ts1.cn.mm.bing.net/th/id/R-C.69d0beddb8e340cb4c20fe7b795bba73?rik=%2f4yIwxFrgBQOnQ&riu=http%3a%2f%2fimg95.699pic.com%2fphoto%2f50092%2f4923.jpg_wh300.jpg&ehk=b%2bgBrg4tdMlb8W%2bA3TywO9kpaaSOtnlBDNQAm%2fJiUfU%3d&risl=&pid=ImgRaw&r=0',
					},
				],
				current: 0,
				count: 5,
				Search:'',
				// value: 2,
				src:'https://pic.quanjing.com/9w/se/QJ6502024084.jpg@!350h',
				info:[
						
					{
						id:1,
						name:1111,
						introduce:"和京津冀军军个黑胡椒固化剂公交卡不有可控硅框架法国红酒血常规体育CVBS",
						grade:3,
						img:'https://pic.quanjing.com/h6/05/QJ6400262249.jpg@!350h'
					},
					{
						id:2,
						name:67098,
						introduce:"和京津冀军军个黑胡椒固化剂公交卡不有可控硅框架红红火火恍恍惚惚",
						grade:4,
						img:'https://pic.quanjing.com/h6/05/QJ6400262249.jpg@!350h'
					},
					{
						id:3,
						name:4567,
						introduce:"换行符简介地方一样发广告和京津冀军军个黑胡椒固化剂公交卡不有可控硅框架",
						grade:1,
						img:'https://pic.quanjing.com/h6/05/QJ6400262249.jpg@!350h'
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
				
			getSearch(){
				console.log(11111);
				uni.switchTab({
					url:"/pages/search/search"
				})
			}

		}
	}
</script>
<style>
	.content {
		height: 100%;
		margin-top: 0;
		position: inherit;
		background-color: #f8f8f8;
		padding: 0px 10px 10px 10px;
	}
		
	.Top{
		display: flex;
		justify-content: space-between;
		padding: 10px; 
		background-color: #ccc;
		
	}
		
	.Top>.left{
		display: flex;
	}
		
	.Top>.left>.center{
		padding: 4px;
		margin-left: 8px;
	}
		
	.Top>.left>.center>view:nth-child(1){
		font-size: 18px;
	}
	.Top>.left>.center>view:nth-child(2){
		margin: 6px 0px;
	}
		
	.search{
		margin: 10px 0px;
	}
	
	
	.info{
		margin-top: 10px;
		padding: 10px;
	}
		
	.info>.t-text{
		font-size: 20px;
		font-weight: bold;
		
	}
		
	.info .info-main-card{
		display: flex;
		margin-top: 16px;
		position: relative;
	}
		
	.info .info-main-card>.left{
		width: 100px;
		height: 90px;
	}
	.info .info-main-card>.left>image{
		width: 100%;
		height: 100%;
	}
		
	.info .info-main-card>.right{
		flex: 1;
		margin-left: 10px;
	}
	.info-main-card>.right>view:nth-child(1){
		font-size: 16px;
		font-weight: bold;
		margin: 4px 0px;
	}
		
	.info-main-card>.right>view:nth-child(2){
		font-size: 14px;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.info-main-card>.right>view:nth-child(3){
		color: orangered;
		line-height: 20px;
	}
		
	.info-main-card>.Zixun{
		font-size: 14px;
		color: skyblue;
		position: absolute;
		bottom: -2px;
		right: 2px;
		border: 1px solid skyblue;
		padding: 2px 4px;
	}
</style>
